<template>
  <div class="add_1">
    <div class="form_box">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        <Form-item label="商品类型" prop="">
          <div class="productionTypeBox">
            <div class="typeBox" v-for="item in typeList" :key="item.id" :class="formValidate.productType===item.id?'active':''" @click="checkProduction(item.id)">
              <h3>{{item.title}}</h3>
              <p>{{item.value}}</p>
              <span class="iconfont icon-jiaobiaoxuanzhong"></span>
            </div>
          </div>
        </Form-item>
        <Form-item label="商品分类" prop="classify">
          <Select v-model="formValidate.classify" placeholder="请选择商品分类">
            <Option v-for="item in productionTypeList" :key="item.value" :value="item.value">{{item.label}}</Option>
          </Select>
        </Form-item>
        <Form-item label="商品名称" prop="name">
          <Input v-model="formValidate.name" placeholder="请输入商品名称"></Input>
        </Form-item>
        <Form-item label="单位" prop="units">
          <Input v-model="formValidate.units" placeholder="请输入商品单位"></Input>
        </Form-item>
        <Form-item label="商品轮播图" prop="slideShow">
          <div style="display: flex; align-items: center">
            <div class="picListBox" v-if="formValidate.slideShow && formValidate.slideShow.length>0">
              <div class="picBox" v-for="(item,index) in formValidate.slideShow" :key="index">
                <img :src="item.src" alt="">
                <span class="iconfont icon-close-bold" @click="deletePic(item)"></span>
              </div>
            </div>
            <div class="uploadBox" @click="uploadSwitch(true)">
              <span class="iconfont icon-zhaoxiangji"></span>
            </div>
          </div>
          <p class="tip">建议尺寸：800*800，默认首张图为主图，最多上传5张</p>
        </Form-item>
        <Form-item label="商品状态">
          <Radio-group v-model="formValidate.status">
            <Radio label="up">上架</Radio>
            <Radio label="down">下架</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="介绍" prop="desc">
          <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
        </Form-item>
      </Form>
    </div>
    <aside>
      <uploadPic :displaySwitch="upSwitch" v-if="upSwitch" @uploadSwitch="uploadSwitch" @checkedPic="checkedPic" />
    </aside>
  </div>
</template>

<script>
  import productionTypeList from '../../../apiData/productionTypeList.js'
  export default {
    name: "add_1",
    data() {
      return {
        typeList: [
          { title: '普通发货', value: '(物流发货)', id: 0 },
          { title: '卡密/网盘', value: '(自动发货)', id: 1 },
          { title: '优惠券', value: '(自动发货)', id: 2 },
          { title: '虚拟商品', value: '(虚拟发货)', id: 3 }
        ],
        productionTypeList: [],
        upSwitch: false,
        formValidate: {
          productType: 0,  // 商品类型
          classify: '',  // 商品分类
          name: '',  // 商品名称
          units: '',  // 商品单位
          status: 'up',  // 商品状态
          slideShow: [],  // 商品轮播图
          desc: ''  // 商品介绍
        },
        ruleValidate: {
          classify: [
            { required: true, message: '请选择商品分类', trigger: 'change' }
          ],
          name: [
            { required: true, message: '商品名称不能为空', trigger: 'blur' }
          ],
          units: [
            { required: true, message: '商品单位不能为空', trigger: 'blur' }
          ],
          slideShow: [
            { required: true, message: '请上传商品轮播图', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入个人介绍', trigger: 'blur' },
            { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.productionTypeList = productionTypeList
      },
      // 选择产品类型
      checkProduction(id) {
        this.formValidate.productType = id;
        this.$emit('handleTags', id)
      },
      // 开启/关闭弹框
      uploadSwitch(flag) {
        this.upSwitch = flag
      },
      // 删除图片
      deletePic(item) {
        let index = this.formValidate.slideShow.indexOf(item);
        if(index>=0) {
          this.formValidate.slideShow.splice(index,1)
        }
      },
      checkedPic(checkedList) {
        let length1 = this.formValidate.slideShow.length;
        let length2 = checkedList.length;
        if(length1 + length2 <= 5 ) {
          checkedList.forEach(item => {
            this.formValidate.slideShow.push(item)
          })
        }else{
          this.$Message.error('最多可上传5张图片！')
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/uploadPic.scss";
  .add_1 {
    .form_box{
      max-width: 600px;
      .productionTypeBox{
        display: flex;
        .typeBox{
          padding: 12px 0;
          line-height: 20px;
          border: 1px solid rgba(102,102,102,0.2);
          border-radius: 4px;
          width: 120px;
          text-align: center;
          margin-right: 16px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          h3{
            font-weight: bold;
          }
          p{
            color: #999;
          }
          span{
            display: none;
          }
        }
        .typeBox.active{
          border: 1px solid #2d8cf0;
          span{
            position: absolute;
            right: -5px;
            bottom: 2px;
            display: block;
            font-size: 36px;
            border-bottom-right-radius: 3px;
            color: #2d8cf0;
          }
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  @import "../../../style/element.scss";
  .ivu-select,
  .ivu-input-wrapper{
    width: 400px;
  }
</style>
